<template>
  <view class="test2">
    <view class="title">
      带教老师签名
    </view>
    <view class="esign">
      <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
    </view>
    <view class="btn">
      <AtButton type='secondary' :onClick="handleReset">重置</AtButton>
      <AtButton type='primary' :onClick="handleGenerate.bind(this)">确定</AtButton>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false,
      key:true
    }
  },
  methods: {
    handleReset () {
      this.$refs.esign.reset()
    },
    handleGenerate () {
      console.log(this.files)
      let tempObj ={}
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
      }).catch(err => {
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
      this.$emit("grtSignUrl",this.resultImg)
    }
  },
    }
</script>
<style lang="less">
.title{
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  vertical-align: middle;
  margin-left: 0.75rem;
  color: #333;
}
.btn{
  margin-top: 0.5rem;
  display: flex;
}
.esign{
  border: 1px solid #cccccc;
}

</style>
